/***************** 全局变量 *************/  

$theme-color: #60a5fa; // #1e40af   #42b983  #60a5fa

$text-color: #333;

$text-color-777: #777;

/**************** 全局变量 -- 字体 *************/

$font-size-tiny: 12px;

$font-size-small: 14px;

$font-size-base: 16px;

$font-size-large: 18px;

$font-size-huge: 24px;


$font-family-base: Arial, sans-serif;

/**************** 全局变量 -- header、nav *************/

$app-header-height: 40vh;

$app-header-height-home-screen: 100vh;

$app-header-height-blog-detail: 40vh;

$app-header-height-blog-detail-mobile: 35vh;


$nav-height: 64px;

$nav-bg-color: #1e40af;

$nav-text-color: white;

$nav-btn-color-hover: #60a5fa;

/***************** 全局mixin *************/  

// 文本溢出省略号
@mixin ellipsis($lines: 1) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    line-height: 1.2em;
    max-height: calc(1.2em * $lines);
}

// 清除浮动
@mixin clearfix() {
    &::after {
        content: '';
        display: block;
        clear: both;
    }
}

// 边框
@mixin border($width: 0px, $style: solid, $color: var(--border-color), $radius: 8px) {
    border: $width $style $color;
    border-radius: $radius;
}

// 过渡
@mixin transition($property: all, $duration: .3s, $timing-function: ease-out) {
    transition: $property $duration $timing-function;
}

// 盒模型
@mixin box-sizing($box: border-box) {
    -webkit-box-sizing: $box;
    -moz-box-sizing: $box;
    box-sizing: $box;
}

// 阴影，有俩参数，分别是：阴影模糊半径，默认2px  颜色，默认主题色
@mixin box-shadow($blur: 2px, $color: rgba(7, 17, 27, 0.05)) {
    // -webkit-box-shadow: 0px 0px $blur $color;
    // -moz-box-shadow: 0px 0px $blur $color;
    // box-shadow: 0px 0px $blur $color;
    // box-shadow: 0 2px $blur $color;
    box-shadow: 0 3px 8px 6px $color;
}

@mixin card() {
    text-align: left;
    width: 100%;
    padding: 10px 10px;
    @include border;
    @include box-shadow;
}

/***************** 全局方法 *************/  

// 将像素值转换为rem单位。
@function px-to-rem($px-value, $base-font-size: $font-size-base) {
    @return ($px-value / $base-font-size) + rem;
}
